<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册-{$siteInfo['title']}</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="description" content="{$siteInfo['description']}">
    <meta name="keywords" content="{$siteInfo['keyword']}">
    <meta name="author" content="Teen">
    <link rel="stylesheet" href="/themes/default/static/layui/css/layui.css" />
    <link rel="stylesheet" href="/themes/default/static/css/home.css" />
    <link rel="stylesheet" href="/themes/default/static/element-ui-2.12/index.css">
    <link rel="stylesheet" href="/themes/default/static/css/common.css" />
    <link rel="stylesheet" href="/themes/default/static/css/login.css" />
</head>
<body>
<div id="app">
    {include file="common/header" /}
</div>
<!--内容DIV-->
<div class="with1200">
    <div class="login-right">
        <h2> <i id="wxIcon" class="layui-icon layui-icon-cellphone"></i>&nbsp;注册账号</h2>
        <hr class="layui-bg-red">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required  lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" id="email" name="email" required  lay-verify="required" placeholder="邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="emailCode" required  lay-verify="required" placeholder="邮箱验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"> <button onclick="sendEmailCode()" id="btn-send-email" type="button" class="layui-btn layui-btn-normal" style="position: relative;top: -8px;">发送</button></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-danger" lay-submit lay-filter="formDemo">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <ul>
            <li><a href="/home/member/wxLogin">微信登录</a></li>
            <li><a href="#">QQ登录</a></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="/themes/default/static/js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="/themes/default/static/layui/layui.js" ></script>
<script type="text/javascript" src="/themes/default/static/js/home.js" ></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="/themes/default/static/element-ui-2.12/index.js"></script>
<script>
    new Vue({
        el: '#app'
    })
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                type:"POST",
                url:"/home/member/register",
                data:data.field,
                success:function (e) {
                    if (e.code == 1){
                        layer.msg(e.msg,{icon:1})
                        setTimeout(function () {
                            location.href = "/";
                        },1500)
                    }else {
                        layer.msg(e.msg,{icon:2})
                    }
                }
            })
            return false;
        });
    });
    function sendEmailCode() {
        var email = $("#email").val();
        $.ajax({
            type:"POST",
            url:"/home/member/sendEmailCode",
            data:{
                email:email
            },
            success:function (e) {
                if (e.code == 1){
                    layer.msg(e.msg,{icon:1})
                    $("#btn-send-email").addClass("layui-btn-disabled");
                    $("#btn-send-email").attr("disabled","disabled");
                    var time = 60;
                 var sert =  setInterval(function(){
                        time = time-1;
                        if (time == 0){
                            clearInterval(sert)
                            $("#btn-send-email").html("发送");
                            $("#btn-send-email").removeClass("layui-btn-disabled")
                            $("#btn-send-email").removeAttr("disabled")
                        }else {
                            $("#btn-send-email").html("发送("+time+")")
                        }
                    }, 1000);
                }else {
                    layer.msg(e.msg,{icon:2})
                }
            }
        })
    }
</script>
</html>